<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0057)http://www.webmotionuk.co.uk/jquery/image_upload_crop.php -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	
	<title>WebMotionUK - DEMO PHP &amp; Jquery image upload &amp; crop</title>
	<script type="text/javascript" src="jquery-pack.js"></script>
	<script type="text/javascript" src="jquery.imgareaselect.min.js"></script>
<style id="stylish-5" class="stylish" type="text/css">@namespace url(http://www.w3.org/1999/xhtml);
iframe #facebook body{
    background: #ffffff !important;
}</style></head>
<body>
<!-- 
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* Date: 2008-05-15
* Ver 1.0
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, 
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF 
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<ul>
	<li><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back to project page</a></li>
	<li><a href="http://www.webmotionuk.co.uk/jquery/jquery_upload_crop.zip">Download Files</a> [ver 1.0]</li>
	<li><a href="http://www.webmotionuk.co.uk/jquery/jquery_upload_cropv1.1.zip">Download Files</a> [ver 1.1]</li>
	<li><a href="http://www.webmotionuk.co.uk/jquery/jquery_upload_cropv1.2.zip">Download Files</a> [ver 1.2]</li>
</ul>
<script type="text/javascript">
function preview(img, selection) { 
	var scaleX = 100 / selection.width; 
	var scaleY = 100 / selection.height; 
	
	$('#thumbnail + div > img').css({ 
		width: Math.round(scaleX * 500) + 'px', 
		height: Math.round(scaleY * 375) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
	});
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
} 

$(document).ready(function () { 
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}else{
			return true;
		}
	});
}); 

$(window).load(function () { 
	$('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
});

</script>
<h1>PHP &amp; JQuery Photo Upload and Crop - DEMO</h1>
<script type="text/javascript"><!--
google_ad_client = "pub-5307845260569610";
/* WMUK 728x90, created 5/25/11 */
google_ad_slot = "3386641537";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="show_ads.js">
</script>
		<h2>Create Thumbnail</h2>
		<div align="center">
			<img src="resized_pic.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail">
			<div style="float:left; position:relative; overflow:hidden; width:100px; height:100px;">
				<img src="resized_pic.jpg" style="position: relative;" alt="Thumbnail Preview">
			</div>
			<br style="clear:both;">
			<form name="thumbnail" action="image_upload_crop.htm" method="post">
				<input type="hidden" name="x1" value="" id="x1">
				<input type="hidden" name="y1" value="" id="y1">
				<input type="hidden" name="x2" value="" id="x2">
				<input type="hidden" name="y2" value="" id="y2">
				<input type="hidden" name="w" value="" id="w">
				<input type="hidden" name="h" value="" id="h">
				<input type="submit" class="button" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb">
			</form>
		</div>
	<hr>
		<h2>Upload Photo</h2>
	<p>NOTE: The upload part has been disabled for security reasons, please use the image provided to test the crop function</p>
	<form name="photo" enctype="multipart/form-data" action="image_upload_crop.htm" method="post">
	Photo <input type="file" name="image" size="30" disabled="disabled"> <input type="submit" name="upload" value="Upload" disabled="disabled" class="button">
	</form>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2602953-3");
pageTracker._initData();
pageTracker._trackPageview();
</script>


<div style="display: none; position: absolute; overflow: hidden; z-index: 0; left: 8px; top: 223px; width: 0px; height: 375px; opacity: 0.2; background-color: rgb(0, 0, 0);" class="imgareaselect-outer"></div><div style="display: none; position: absolute; overflow: hidden; z-index: 0; left: 8px; top: 223px; width: 0px; height: 0px; opacity: 0.2; background-color: rgb(0, 0, 0);" class="imgareaselect-outer"></div><div style="display: none; position: absolute; overflow: hidden; z-index: 0; left: 8px; top: 223px; width: 500px; height: 375px; opacity: 0.2; background-color: rgb(0, 0, 0);" class="imgareaselect-outer"></div><div style="display: none; position: absolute; overflow: hidden; z-index: 0; left: 8px; top: 223px; width: 0px; height: 375px; opacity: 0.2; background-color: rgb(0, 0, 0);" class="imgareaselect-outer"></div><div style="display: none; position: absolute; overflow: hidden; z-index: 0; border-style: solid; left: 8px; top: 223px; width: 0px; height: 0px; border-width: 1px; background-color: rgb(255, 255, 255); opacity: 0.2;" class="imgareaselect-selection"></div><div style="display: none; position: absolute; overflow: hidden; z-index: 0; left: 8px; top: 223px; width: 0px; height: 0px; border: 1px solid rgb(0, 0, 0);" class="imgareaselect-border1"></div><div style="display: none; position: absolute; overflow: hidden; z-index: 0; left: 8px; top: 223px; width: 0px; height: 0px; border: 1px dashed rgb(255, 255, 255);" class="imgareaselect-border2"></div></body><style type="text/css"></style></html>